<template>
	<view >
		<view class="example-body">
			<uni-search-bar radius="100" placeholder="搜索好友" @confirm="search" bgColor="#ffffff" >
				<uni-icons slot="searchIcon" color="#b0e3ff" size="18" type="search"/>
			</uni-search-bar>
		</view>
	    <view v-for="(item,index) in dataList" :key="item.groupName" >
			<view class="group">
				<text style="font-size:30rpx;color:#aaaaaa">{{item.groupName}}</text>
			</view>
			<list>
				<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
				<cell v-for="(items, index) in item.chirder" :key="indexs">
					<view>
						<view class="groupitem">
							<image src="../../static/yyt.jpg" class="head"></image>
							<text class="content">{{items.name}}</text>
						</view>
					</view>
					
				</cell>
			</list>
	  </view>
  </view>
</template>

<script>
import unisearchbar from '../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'
  export default {
	  
	components: {
	  unisearchbar,
	  },
	  
	
    data () {
      return {
        dataList:[{
			id: 1,
			groupName: "A",
			num: 8,
			sum: 200,
			isShowList:false,
			chirder: [{
				id: 11,
				name: "lili",
				content: "朋友还就不见",
				time: "2020-05-29"
				}]
			},
		{
			id: 2,
			groupName: "B",
			num: 2,
			sum: 10,
			isShowList:false,
			chirder: [{
				id: 21,
				name: "lili",
				content: "朋友还就不见",
				time: "2020-05-29"
				}, {
				id: 22,
				name: "lili",
				content: "朋友还就不见",
				time: "2020-05-29"
				}]
        }]
     }
   }
        
}
  
</script>

<style>
	
	page {
			background-color: #f2f2f2;
			padding-bottom: 30upx;
		}
		
	.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 0px;
	}
	.group{
		display: inline-flex;
		flex-direction: row;
		padding-left:20px;
		padding-top: 10px;
		height:40px;
		text-align: center;
	}
	.groupitem{
		display: flex;
		flex-direction: row;
		padding-left:25px;
		background-color: white;
		margin-top: 1px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.head{
		width:60px;
		height:60px;
		border-radius: 30px;
	}
	.content{
		font-size: 40rpx;
		color: #474747;
		padding-top:40upx;
		padding-left:20px;
	}
</style>